@import 'reset';
@import 'layout_variables';
@import 'variables';
@import 'themes';
@import 'fonts';
@import 'typo';

// @import 'generic/aside';
@import 'generic/catalogue';
@import 'generic/collapsible';
@import 'generic/entities_choice';
@import 'generic/form';
// @import 'generic/gauges';
@import 'generic/header';
@import 'generic/help';
@import 'generic/layout';
@import 'generic/lists';
@import 'generic/main_content';
@import 'generic/menu';
@import 'generic/modal';
@import 'generic/notif';
@import 'generic/pager';
@import 'generic/popup';
@import 'generic/table';
@import 'generic/tabs';
@import 'generic/tree_view';

// framework-related
@import 'frameworks/jquery';
@import 'frameworks/leaflet';
@import 'frameworks/pdfjs';
@import 'frameworks/select2';
@import 'frameworks/tinyMCE';
@import 'frameworks/typeahead';

// temporary loading before stylesheets are linked to pages

body.caerp {
	background: var(--screen-background-color);

	ul {
		list-style-type: square;
		list-style-position: inside;
	}

	dt {
		font-weight: bold;
	}

	h1,
	h2,
	legend,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;

		svg {
			height: 1em;
			width: 1em;
		}
	}

	h2 small {
		font-weight: normal;
		padding-left: var(--padding-s);

		.icon.status {
			margin: 0 0 0 var(--padding-s);
		}
	}

	a:link,
	a:visited {
		color: var(--link-color);
		text-decoration: underline;
	}

	a:hover,
	a:focus,
	a:active {
		text-decoration: none;
	}

	a .icon {
		margin-right: .25rem;
	}

	a[href^="mailto"],
	a[href^="tel"] {
		align-items: center;
		display: inline-flex;
		hyphens: none;
		overflow-wrap: anywhere;

		.icon {
			flex: 0 0 1rem;
		}
	}

	.align_right {
		text-align: right;
	}

	.align_center {
		text-align: center;
	}

	.icon {
		display: inline-block;
		position: relative;

		>svg {
			fill: var(--svg-fill-color);
			font-size: 1rem;
			height: 1rem;
			pointer-events: none;
			vertical-align: sub;
			width: 1rem;

			title {
				display: none;
			}
		}

		&.close {
			svg {
				margin: 2px;
			}
		}

		&.big {
			>svg {
				font-size: 2rem;
				height: 2rem;
				width: 2rem;
			}
		}

		&.spin {
			animation: spin_anim 3s linear infinite;
		}

		.bubble {
			bottom: -3px;
			position: absolute;
			right: -3px;
		}

		&.type {
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: contain;

			&.default {
				background-image: url("../icons/caret.svg");
			}

			&.product {
				background-image: url("../icons/box.svg");
			}

			&.group {
				background-image: url("../icons/composite.svg");
			}

			&.training {
				background-image: url("../icons/training.svg");
			}

			&.service {
				background-image: url("../icons/service.svg");
			}

			&.workforce {
				background-image: url("../icons/workforce.svg");
			}
		}

		&.tag {
			align-items: center;
			background: var(--tag-default-background-color);
			border-radius: 3px;
			display: inline-flex;
			font-size: .875em;
			line-height: 1.2;
			margin: 0 0 .125rem;
			overflow-wrap: break-word;
			padding: .125rem .25rem;

			svg {
				height: .875rem;
				flex: 0 0 .875rem;
				width: .875rem;
			}

			&.only {
				padding: .25rem;
				vertical-align: middle;
			}

			&:not(.only) svg {
				margin-right: var(--padding-s);
			}

			&.only {
				height: 1.375rem;
				width: 1.375rem;
			}

			&.neutral {
				svg {
					fill: var(--func-neutral-color);
				}
			}

			&.positive {
				background: var(--func-positive-color);
				color: var(--theme-text-color);

				svg {
					fill: var(--theme-text-color);
				}
			}

			&.negative {
				background: var(--func-negative-color);
				color: var(--theme-text-color);

				svg {
					fill: var(--theme-text-color);
				}
			}

			&.caution {
				background: var(--func-caution-color);
				color: var(--svg-invert-fill-color);

				svg {
					fill: var(--svg-invert-fill-color);
				}
			}

			+.tag {
				margin-left: .25rem;
			}
		}

		&.function {
			display: inline-flex;
			vertical-align: middle;

			svg {
				height: 1rem;
				flex: 0 0 1rem;
				width: 1rem;
			}

			&.neutral {
				svg {
					fill: var(--func-neutral-color);
				}
			}

			&.positive {
				svg {
					fill: var(--func-positive-color);
				}
			}

			&.negative {
				svg {
					fill: var(--func-negative-color);
				}
			}

			&.caution {
				svg {
					fill: var(--func-caution-color);
				}
			}
		}
	}

	a.icon {
		svg {
			margin-right: var(--padding-s);
			vertical-align: text-top;
		}
	}

	a.icon:not(.btn):hover>svg,
	a.icon:not(.btn):focus>svg,
	a.icon:not(.btn):active>svg {
		filter: drop-shadow(0 1px 0 var(--static-invert-color));
 		fill: var(--form-icon-button-hover-color);
	}

	.icon.status {
		align-items: center;
		background: var(--icon-neutral-color);
		border-radius: .25rem;
		display: inline-flex;
		display: inline flex;
		height: 1.75rem;
		justify-content: center;
		padding: .3125rem;
		width: 1.75rem;

		svg {
			fill: var(--static-invert-color);
			height: 1.125rem;
			margin: 0 !important;
			width: 1.125rem;
		}

		&.big {
			height: 3rem;
			width: 3rem;

			svg {
				height: 2.5rem;
				width: 2.5rem;
			}
		}

		&.success,
		&.valid,
		&.completed {
			background: var(--func-positive-color);
		}

		&.caution,
		&.wait,
		&.danger {
			background: var(--func-caution-color);
			svg {
				fill: var(--static-color);
			}
		}

		&.partial_unpaid,
		&.action_pending {
			background: linear-gradient(160deg,  var(--func-positive-color) 0%,  var(--func-positive-color) 50%,  var(--func-caution-color) 51%,  var(--func-caution-color) 100%);
		}

		&.error,
		&.invalid,
		&.cancelled,
		&.failed,
		&.unpaid {
			background: var(--func-negative-alternate-color);
		}

		&.draft,
		&.closed {
			background: var(--icon-neutral-color);
		}

		&.disabled,
		&.private {
			background: var(--func-disabled-color);
		}

		&.neutral,
		&.planned {
			background: var(--func-neutral-color);
		}

		&.mode {
			background: var(--theme-color);

			svg {
				fill: var(--theme-text-color);
			}
		}
	}

	h2 .icon.status {
		svg {
			vertical-align: text-top;
		}
	}

	p .icon svg {
		vertical-align: baseline;
	}

	.bubble {
		background: var(--func-neutral-color);
		color: var(--static-invert-color);
		border-radius: 50%;
		display: inline-block;
		font-family: 'OpenSans', sans-serif;
		font-size: 1rem;
		font-weight: bold;
		height: 1.5rem;
		letter-spacing: -.05em;
		line-height: 1.4375rem;
		text-align: center;
		width: 1.5rem;

		&.inactive {
			background: var(--icon-neutral-color);
		}

		&.caution {
			background: var(--func-caution-color);
			color: var(--static-color);
		}

		&.negative {
			background: var(--func-negative-color);
		}

		&.positive {
			background: var(--func-positive-color);
			color: var(--static-color);
		}
	}

	svg {
		&.neutral {
			fill: var(--func-neutral-color);
		}

		&.error,
		&.invalid {
			fill: var(--func-negative-color);
		}

		&.caution {
			fill: var(--func-caution-color);
		}

		&.success,
		&.valid {
			fill: var(--func-positive-color);
		}
	}

	.user_avatar {
		align-items: center;
		background: var(--theme-color);
		border-radius: 50%;
		clip-path: circle(1.5rem);
		display: flex;
		flex: 0 0 3rem;
		height: 3rem;
		justify-content: center;
		margin-right: 5px;
		overflow: hidden;
		width: 3rem;

		img {
			height: auto;
			max-height: 100%;
			max-width: 100%;
			width: auto;
		}

		svg {
			height: 2.25rem;
			fill: var(--theme-text-color);
			margin: .75rem .375rem 0;
			width: 2.25rem;
		}

		+h3 {
			align-self: center;
		}
	}

	.layout.flex .user_avatar+div {
		align-self: center;
	}

	.access_tools {
		background: var(--form-input-background-color);
		box-shadow: 0 0 5px var(--box-shadow-color);
		margin-left: -25rem;
		padding: var(--padding-s);
		position: absolute;
		transition: transform .15s ease-out;
		max-width: 20rem;
		z-index: $aboveMaskLayer;

		a {
			align-items: flex-start;
			color: var(--link-color);
			display: flex;
			font-size: 1rem;
			font-weight: bold;
			justify-content: space-between;
			line-height: 1.125rem;
			margin-bottom: 2px;
			padding: 2px;
			text-decoration: none;

			>span {
				flex: 1 1 auto;
			}

			em {
				color: var(--text-greyed-color);
				flex: 0 0 1em;
				font-style: normal;
				font-weight: normal;
				margin-top: 2px;
				text-align: center;
			}

			&.no_desktop {
				display: none;
			}
		}

		a:hover,
		a:focus,
		a:active {
			span {
				text-decoration: underline;
			}
		}

		&:focus,
		&:focus-within,
		&:target {
			transform: translate(25rem);
		}

		span.menu_mini {
			display: none;
		}

		span.menu_maxi {
			display: inline;
		}
	}

	&.menu_mini .access_tools {
		span.menu_mini {
			display: inline;
		}

		span.menu_maxi {
			display: none;
		}
	}

	.more_info {
		background: var(--screen-background-color);
		box-shadow: 0 4px 6px var(--box-shadow-color);
		display: none;
		max-width: 90vw;
		padding: 5px;
		position: absolute;
		z-index: $actionLayer;
		width: max-content;

		&.open {
			display: block;
		}

		h4 {
			align-items: center;
			display: flex;
			justify-content: space-between;

			.icon {
				align-self: flex-start;
			}
		}
	}

	&.preload * {
		transition: none !important;
	}

	.loading_box,
	.feedback_box {
		align-items: center;
		background: var(--loader-layer-background-color);
		bottom: 0;
		display: flex;
		justify-content: center;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: $spinner;

		svg {
			animation: spin_anim 3s linear infinite;
			height: 8rem;
			width: 8rem;
			fill: var(--svg-invert-fill-color);
		}
	}

	.feedback_box {
		svg {
			animation: unset;
			fill: var(--func-neutral-color);
		}

		&.positive {
			svg {
				fill: var(--func-positive-color);
			}
		}

		&.negative {
			svg {
				fill: var(--func-negative-color);
			}
		}

		&.caution {
			svg {
				fill: var(--func-caution-color);
			}
		}
	}

	.text_block {
		margin: var(--padding-s) 0;
		padding: var(--padding-m) 0;
	}

	hr {
		border: 1px solid var(--border-trans-color);
		border-width: 1px 0 0;
	}

	.separate_top {
		border-top: 1px solid var(--border-trans-color);
		margin-top: var(--padding-xl);
	}

	.separate_bottom {
		border-bottom: 1px solid var(--border-trans-color);
		margin-bottom: var(--padding-xl);
	}

	.separate_top_dashed {
		border-top: 1px dashed var(--border-trans-color);
		margin-top: var(--padding-m);
	}

	.separate_bottom_dashed {
		border-bottom: 1px dashed var(--border-trans-color);
		margin-bottom: var(--padding-m);
	}

	.space_top {
		margin-top: var(--padding-m);
	}

	.space_bottom {
		margin-bottom: var(--padding-m);
	}

	.separate_block {
		box-shadow: 0 2px 4px var(--box-shadow-color);
		margin-bottom: var(--padding-xl);
	}

	.private .separate_block {
		box-shadow: 0 0 2px var(--box-shadow-color);
	}

	.separate_block.composite {
		.border_left_block {
			margin-bottom: 1px;
		}

		.border_left_block.composite,
		.border_left_block~.border_left_block {
			border-top: 1px dashed var(--border-color);
			box-shadow: 0 -1px 1px var(--box-shadow-color);
		}
	}

	.content_padding {
		padding: var(--padding-s);
	}

	.content_double_padding {
		padding: var(--padding-m);
	}

	.content_vertical_padding {
		padding: var(--padding-s) 0;
	}

	.content_vertical_double_padding {
		padding: var(--padding-m) 0;
	}

	.content_horizontal_padding {
		padding: 0 var(--padding-s);
	}

	.content_horizontal_double_padding {
		padding: 0 var(--padding-m);
	}

	.border_left_block {
		border-left: var(--padding-s) solid var(--theme-color);
	}

	.private .border_left_block {
		border-left-color: var(--border-color);
	}

	.status_block {
		color: var(--static-invert-color);
		font-weight: bold;

		&.positive {
			background: var(--func-positive-color);
		}

		&.negative {
			background: var(--func-negative-color);
		}

		&.caution {
			background: var(--func-caution-color);
			color: var(--static-color);
		}
	}

	.activity-total,
	.internal-total {
		background: var(--message-info-background-color);
		margin: 0 0 var(--padding-m);
		padding: var(--padding-s);
	}

	.grand-total {
		background: var(--message-info-background-color);
		margin: var(--padding-m) 0;
		padding: var(--padding-s);

		.layout.flex {
			justify-content: space-between;

			>div {
				flex: 1 1 auto;
				margin-right: var(--padding-m);
			}

			>div:last-child {
				flex: 0 1 auto;
				margin-right: 0;
			}
		}

		.icon:not(.status) {
			svg {
				height: 1.25rem;
				width: 1.25rem;
			}
		}

		.icon.error:not(.status) {
			svg {
				fill: var(--func-negative-color);
			}
		}

		.icon.caution:not(.status) {
			svg {
				fill: var(--func-caution-color);
			}
		}

		.icon.status {
			margin: var(--padding-s) 0;
		}

		.btn.unstyled {
			margin-top: var(--negative-padding-s);
			vertical-align: middle;
		}
	}

	.totals.form-section {
		display: flex;
		justify-content: flex-end;

		.layout.flex {
			width: 12em;

			>div:nth-child(2n + 1) p {
				padding-top: 2px;
			}

			>div:nth-child(2n) p {
				text-align: right;
			}
		}

		&.business_expenses {
			.layout.flex {
				width: 26em;
			}
		}

		ul {
			margin-left: var(--padding-m);
		}
	}

	p.math_formula {
		padding: var(--padding-s);
		white-space: nowrap;

		&.denominator {
			border-top: 1px solid var(--border-color);
		}
	}

	.vanishable:empty {
		/* out of flow when empty */
		display: none;
	}

	.print-only {
		display: none !important;
	}

	.dropzone {
		align-items: center;
		border: 1px dashed var(--border-color);
		margin: var(--padding-m) 0;
		padding: var(--padding-m);
		text-align: center;

		.icon {
			margin: 1rem auto;

			svg {
				height: var(--icon-size-l);
				width: var(--icon-size-l);
			}
		}

		label {
			cursor: pointer;
			display: block;
			width: 100%;
		}
	}

	.capabilities {
		.content_vertical_padding + div ~ div {
			padding-top: var(--padding-m);
		}

		h4 .icon {
			fill: var(--svg-fill-color);
		}
	}

	.print-hint {
		display: none !important;
	}

	span.hidden_pdf,
	small.hidden_pdf,
	td.hidden_pdf,
	th.hidden_pdf,
	tr.hidden_pdf td:not(.empty):not(.level_spacer):not(.col_actions),
	tr.hidden_pdf th:not(.empty):not(.level_spacer):not(.col_actions) {
		background: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, var(--screen-shaded-background-color) 5px, transparent 6px, transparent 10px);
		color: var(--text-greyed-color);
		text-shadow: 0 1px 0 var(--screen-background-color), 0 -1px 0 var(--screen-background-color), 1px 0 0 var(--screen-background-color), -1px 0 0 var(--screen-background-color);
	}

	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
		clip: auto !important;
		clip-path: none;
		color: #21759b;
		display: block;
		font-size: .875rem;
		font-weight: bold;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
	}

	// hiding content except for accessibility devices, often use to be replaced by generated content (icons)
	.visuallyhidden {
		border: 0 none !important;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}

	.hide-decimals .decimal-part {
		display: none;
	}

	@-webkit-keyframes appear_anim {
		0% {
			display: block;
			opacity: 0;
			transform: scale(.75);
			visibility: visible;
		}

		5% {
			opacity: 0;
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes appear_anim {
		0% {
			display: block;
			opacity: 0;
			transform: scale(.75);
			visibility: visible;
		}

		5% {
			opacity: 0;
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@-webkit-keyframes dismiss_anim {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		95% {
			opacity: 0;
		}

		100% {
			display: none;
			opacity: 0;
			transform: scale(.75);
			visibility: hidden;
		}
	}

	@keyframes dismiss_anim {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		95% {
			opacity: 0;
		}

		100% {
			display: none;
			opacity: 0;
			transform: scale(.75);
			visibility: hidden;
		}
	}

	@-webkit-keyframes spin_anim {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes spin_anim {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp {
		.access_tools a.no_tablet {
			display: none;
		}

		.access_tools a.no_desktop {
			display: flex;
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp {
		.grand-total {
			.layout.flex {
				>div:nth-child(n + 2) {
					margin-top: var(--padding-s);
				}

				>div:empty {
					display: none;

					+div {
						margin-top: 0;
					}
				}
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp {

		.separate_block {
			max-width: calc(100vw - .625rem);
			width: calc(100vw - .625rem);
		}

		.border_left_block {
			max-width: 100vw;
			width: 100vw;
			overflow-x: auto;
		}
	}
}

@media print {

	// styles used when printing pages
	@page {
		margin: 1cm;
	}

	html,
	body {
		overflow: visible;
		page-break-after: avoid;
		width: 100%;
	}

	body.caerp {
		background: $print_background;
		color: $print_text;
		font-size: 10pt;
		max-width: 100%;
		overflow: visible;
		page-break-after: avoid;

		.base_layout,
		.base_content {
			max-width: 100%;
			overflow: visible;
			width: 100%;
		}

		.base_layout.layout.flex {
			display: block;
			height: auto;
			overflow: visible;
			page-break-after: avoid;
		}

		.base_content.layout.flex {
			display: block;
			outline: none;
			padding: var(--print-padding-r);
		}

		.main_area,
		.main_area>main,
		.main_content {
			display: block;
			height: auto;
			overflow: visible;
			page-break-after: avoid;
			max-width: 100%;
			padding: 0;
			width: 100%;
		}

		.main_header {
			height: auto;
			padding: 0;

			.header_content {
				overflow: visible;

				>div {
					overflow: visible;
				}
			}

			h1 {
				overflow: visible;
				white-space: normal;

				.icon {
					display: none;
				}
			}
		}

		.content {
			width: 100%;
		}

		h1 {
			font-size: 14pt;
		}

		h2 {
			font-size: 13pt;
		}

		h3 {
			font-size: 12pt;
		}

		h4,
		h5,
		h6 {
			font-size: 11pt;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		.keep_with_next {
			page-break-after: avoid;
		}

		ul {
			page-break-inside: avoid;
		}

		.table_container {
			display: contents !important;
			height: auto;
			margin: 0;
			overflow-x: visible;
			padding: var(--print-padding-r) var(--print-padding-s) var(--print-padding-2xl) !important;
			width: 100% !important;

			thead {
				position: static;
			}
		}

		table {
			page-break-inside: auto;

			tr {
				page-break-inside: avoid;
				page-break-after: auto;
			}

			thead {
				display: table-header-group;
				page-break-after: avoid;
			}

			tfoot {
				display: table-footer-group;
				page-break-before: avoid;
			}

			th,
			td {
				font-size: 10pt;
			}
		}

		.tab-content {
			border: 0 none !important;
			height: auto;
			overflow: visible;
			padding: var(--print-padding-m) 0;
			page-break-after: avoid;
			width: 100%;
		}

		.nav-tabs,
		.dropzone {
			display: none;
		}

		.tab-content .tab-pane {
			display: block !important;
			visibility: visible !important;
		}

		.hidden-print {
			display: none !important;
		}

		.print-only {
			display: block !important;
		}

		.nav-pills,
		button,
		.btn,
		.col_actions,
		.main_toolbar {
			display: none !important;
		}
	}
}
